import { memo, useCallback, useContext } from "react";
import { XContext } from "./context/XContext";

export const ChildX = memo(() => {
  const { value, updateValue } = useContext(XContext);

  const handleIncrement = useCallback(() => {
    updateValue?.((v) => v + 1);
  }, [updateValue]);

  const handleDecrement = useCallback(() => {
    updateValue?.((v) => v - 1);
  }, [updateValue]);

  return (
    <div>
      <div>ChildX</div>
      <div>{value}</div>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
});
